<template>
  <div class="category">
    <tab-bar></tab-bar>
    <!-- header区域 -->
    <header class="category-header wrap">
      <i class="iconfont icon-left" @click="gohome"></i>
      <div class="header-search">
        <i class="iconfont icon-search"></i>
        <!-- <span class="search-title" to="./search">11.11随心所欲Go</span> -->
        <input
          type="text"
          class="search-title"
          placeholder="家电返场同价11.11"
        />
      </div>
      <i class="iconfont icon-More"></i>
    </header>
    <!-- 内容区域 -->
    <section class="category-wrap" ref="categoryWrap">
      <!-- 左侧分类导航 -->
      <div class="nav-side-wrapper" ref="sidewrapper">
        <ul class="nav-side">
          <li
            v-for="(item, index) in content"
            :key="index"
            @click="selectMenu(index)"
            :class="{ active: currentIndex === index }"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <!-- 右侧商品数据 -->
      <div class="content-wrapper" ref="contentwrapper">
        <div
          class="content-slide"
          v-for="(item, index) in categoryList"
          :key="index"
        >
          <img :src="item.mainImgUrl" class="category-main-img" />
          <div
            class="category-list"
            v-for="(category, index) in item.list"
            :key="index"
          >
            <p class="catogory-title">{{ category.title }}</p>
            <div
              class="product-item"
              v-for="(product, index) in category.productList"
              :key="index"
            >
              <img :src="product.imgUrl" class="product-img" />
              <p class="product-title">{{ product.title }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import tabBar from "../../components/tabBar.vue";
import BScroll from "better-scroll";
import { getCategoryData } from "../../api/axios";

export default {
  name: "category",
  components: { tabBar },
  data() {
    return {
      content: [],
      currentIndex: 0,
    };
  },
  methods: {
    gohome() {
      this.$router.push("/home");
    },
    // 固定父容器高度
    setSearchWrapHeight() {
      let $screenHeight = document.documentElement.clientHeight; //获取页面的高度
      // let $contentwrapper = this.$refs.contentwrapper.scrollHeight;
      this.$refs.sidewrapper.style.height = $screenHeight - 100 + "px";
      this.$refs.contentwrapper.style.height = $screenHeight - 100 + "px";
    },
    selectMenu(index) {
      this.currentIndex = index;
    },
  },
  mounted() {
    setTimeout(() => {
      this.setSearchWrapHeight();
      //左侧的滚动
      this.$nextTick(() => {
        new BScroll(this.$refs.sidewrapper, {
          click: true,
        });
      });
      // 右侧的滚动
      this.$nextTick(() => {
        new BScroll(this.$refs.contentwrapper, {});
      });
    }, 300);
  },
  updated() {
    // this.setSearchWrapHeight();
  },
  created() {
    //数据请求
    getCategoryData().then((res) => {
      // console.log(res);
      if (res.msg === "ok") {
        this.content = res.data;
      } else {
        this.$Toast.fail("数据出错");
      }
    });
  },
  // 数据的索引和当前点击后currentIndex值相等的元素就是页面中需要渲染的数据
  computed: {
    categoryList() {
      return this.content.filter((v, i) => this.currentIndex == i);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../common/style/mixin.scss";
// 内容区域样式
.category-header {
  position: fixed;
  left: 0;
  top: 0;
  @include fj;
  width: 100%;
  height: 100px;
  line-height: 100px;
  padding: 0 30px;
  @include boxSizing;
  font-size: 30px;
  color: #656771;
  z-index: 10000;

  &.active {
    background: $red;
  }

  .icon-left {
    font-size: 50px;
    font-weight: bold;
  }

  .header-search {
    display: flex;
    width: 80%;
    height: 40px;
    line-height: 40px;
    margin: 20px 0;
    padding: 10px 0;
    color: #232326;
    background: #f7f7f7;
    @include borderRadius(40px);

    .icon-search {
      padding: 0 20px 0 40px;
      font-size: 34px;
    }

    .search-title {
      font-size: 24px;
      color: #666;
      background-color: #f7f7f7;
    }
  }

  .icon-More {
    font-size: 40px;
  }
}

//左侧样式
.category-wrap {
  @include fj;
  width: 100%;
  margin-top: 100px;
  background: #f8f8f8;
  border-top: 1px solid #999;

  .nav-side-wrapper {
    width: 28%;
    height: 100%;
    overflow: hidden;

    .nav-side {
      width: 100%;
      @include boxSizing;
      background: #f8f8f8;

      li {
        width: 100%;
        height: 92px;
        text-align: center;
        line-height: 92px;
        font-size: 28px;

        &.active {
          color: $red;
          background: #fff;
        }
      }
    }
  }
}

// 右侧样式
.content-wrapper {
  width: 72%;
  height: 100%;
  overflow: hidden;

  .content-slide {
    width: 100%;
    padding: 0 20px;
    background: #fff;
    @include boxSizing;

    .category-main-img {
      width: 100%;
    }

    .category-list {
      display: flex;
      flex-wrap: wrap;
      flex-shrink: 0;
      width: 100%;

      .catogory-title {
        width: 100%;
        font-size: 34px;
        font-weight: 500;
        padding: 40px 0;
      }

      .product-item {
        width: 33.3333%;
        margin-bottom: 20px;
        text-align: center;
        font-size: 30px;

        img {
          width: 100%;
        }
      }
    }
  }
}
</style>